<template>
	<scroll-view class="orderListItem">
		<view class="orderListItem_customerName">
			来自{{context.userName}}的订单
		</view>
		<view class="orderListItem_productMsg">
			<view class="orderListItem_productMsg_img">
				<image :src="context.productMsg.img" mode=""></image>
			</view>
			<view class="orderListItem_productMsg_content">
				
				<view class="orderListItem_productMsg_content_name">
					{{context.productMsg.msg}}
				</view>
				<view class="orderListItem_productMsg_content_price">
					￥{{context.productMsg.price}}
				</view>
				<view class="orderListItem_productMsg_content_nav">
					<navigator url="">点击查看详情>>>></navigator>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import vanIcon from '@/wxcomponents/vant/@vant/icon'
	export default{
		components:{
			vanIcon
		},
		props:{
			context:{
				type:Object
			}
		}
	}
</script>

<style lang="less">
	.orderListItem{
		.orderListItem_customerName{
			font-size: 1.2rem;
			font-weight: 500;
			margin: .1rem 0;
			padding: .2rem;
			width: 100%;
			border-bottom: 1px #999 solid;
			color: #069a0d;
		}
		width: 98%;
		margin: 1rem auto;
		box-sizing: border-box;
		padding: .2rem;
		.orderListItem_productMsg{
			display: flex;
			justify-content: space-around;
			.orderListItem_productMsg_img{
				width: 30%;
				image{
					width: 140px;
					height: 100px;
				}
			}
			.orderListItem_productMsg_content{
				width: 60%;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				flex-flow: column wrap; 
				.orderListItem_productMsg_content_name{
					font-size: 1rem;
					color: #333;
				}
				.orderListItem_productMsg_content_price{
					font-size: 1.5rem;
					color: red;
				}
				.orderListItem_productMsg_content_nav{
					color: #999;
					font-size: .8rem
				}
			}
		}
	}
</style>